<template>
  <div :class="menuClass">
    <button @click="toggleMenu">Toggle Menu</button>
    <div id="0" :class="['item1',currentItem === 0? 'item-active' : '']" @click="show(0)">
      <img class="icon" src="../assets/logo.svg" />移动端
    </div>
    <div id="1" :class="['item2',currentItem === 1? 'item-active' : '']" @click="show(1)">
      <img class="icon" src="../assets/logo.svg" />前端
    </div>
    <div :class="['item3',currentItem === 2? 'item-active' : '']" @click="show(2)">
      <img class="icon" src="../assets/logo.svg" />物联网
    </div>
    <div :class="['item4',currentItem === 3? 'item-active' : '']" @click="show(3)">
      <img class="icon" src="../assets/logo.svg" />服务端
    </div>
  </div>
</template>

<script>
export default {
  name: "LeftMenu",
  data() {
    return {
      currentItem: -1,
      menuchange: 2
    };
  },
  computed: {
    menuClass() {
      return {
        wrap: true,
        "wrap-active1": this.menuchange == 1,
        "wrap-active2": this.menuchange == 2
      };
    }
  },
  methods: {
    show: function(index) {
      this.currentItem = index;
    },
    toggleMenu: function() {
      if (this.menuchange == 1) {
        this.menuchange = 2;
      } else if (this.menuchange == 2) {
        this.menuchange = 0;
      } else {
        this.menuchange = 1;
      }
    }
  }
};
</script>

<style scoped>
.wrap {
  width: 250px;
  height: 100vh;
  background: #001528;
}
.wrap-active1 {
  background: #0084ff;
}
.wrap-active2 {
  background: #ff0000;
}
.icon {
  width: 20px;
  height: 20px;
  margin-left: 60px;
  margin-right: 20px;
}
.item1,
.item2,
.item3,
.item4 {
  display: flex;
  align-items: center;
  height: 60px;
  line-height: 60px;
  flex: 1;
  color: #fff;
  text-align: center;
  cursor: pointer;
}

.item-active {
  background: #0084ff;
}
</style>
